import React, { Component } from "react";
import { Text, View, StyleSheet, TouchableOpacity, Image, TextInput, PermissionsAndroid, Platform, DeviceEventEmitter, Switch } from 'react-native';
import Constant from '../../utils/Constant'//全局变量
import { getImgUrl } from '../../utils/ComFunction';
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Header from "../../components/header";
import { ToastToUser } from "../../utils/CustomToast";
import ActionSheet from 'react-native-actionsheet'
import ImageCropPicker from 'react-native-image-crop-picker';
import Upload from '../../components/upload/Upload'
import { requestCameraPermission, requestWritePermission } from '../../utils/Permission';
import Loading from "../../utils/Loading";
import AndroidModule from "../../utils/AndroidConnent";
import CommonDialog from "../../components/dialog/CommonDialog";
const isAndroid = Platform.OS == 'android';
import DeviceInfo from 'react-native-device-info';
import StatusBarSelf from "../../components/StatusBarSelf";
import Storage from '../../utils/AsyncStorage';

export default class OrderSearchPage extends Component {

    constructor(props) {
        super(props);
        let keyword = this.props.route.params.keyword
        this.state = {
            historyList: [],
            keywordInputText: keyword ? keyword:'',
        };
    }

    componentDidMount() {
        this.getHistoryList()
    }

    render() {
        const navigation = this.props.navigation;
        return (
            <View
                style={styles.container}>

                <StatusBarSelf color='#ffffff'></StatusBarSelf>

                <View
                    style={styles.topContain}>
                    <TouchableOpacity
                        style={styles.iconContain}
                        onPress={() => {
                            navigation.goBack();
                        }}>
                        <Image style={styles.iconImg} source={require('source/image/comm/back.png')}></Image>
                    </TouchableOpacity>

                    <View
                        style={styles.searchContain}>
                        <Image style={styles.searchImg} source={require('source/image/comm/icon_sc_search.png')}></Image>
                        <TextInput
                            placeholder="请输入订单号、车辆名称或商家名称"
                            style={styles.searchInput}
                            value={this.state.keywordInputText}
                            onChangeText={(text) => { this.setState({ keywordInputText: text }) }}
                            returnKeyType='search'
                            onSubmitEditing={() => { this.search() }}>

                        </TextInput>
                    </View>

                </View>

                <View style={styles.clearContain}>
                    <Text style={styles.historyText}>搜索历史</Text>
                    <TouchableOpacity
                        style={{flexDirection:'row',alignItems:'center'}}
                        onPress={() => { this.clearHistory() }}>
                        <Image style={styles.clearImg} source={require('source/image/comm/btn_clear_history.png')}></Image>
                        <Text style={styles.clearText}>清空历史</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.historyContain}>
                    {
                        this.state.historyList.map((item,index)=>{
                            return(
                                <TouchableOpacity
                                    key={index}
                                    style={styles.historyItem}
                                    onPress={()=>{
                                        
                                        this.historyClick(item)
                                    }}>
                                    <Text style={[styles.historyText,{fontSize:14}]}>{item}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                </View>

            </View>
        );
    }

    clearHistory(){
        this.setState({historyList:[]})
        Storage.removeValue('orderSearchHistory')
    }

    historyClick(item){
        this.saveHistoryList(item)

        if (this.props.route.params.searchHandler) {
            this.props.route.params.searchHandler(item)
        }

        this.props.navigation.goBack()
    }

    search(){
        this.saveHistoryList(this.state.keywordInputText)

        if (this.props.route.params.searchHandler) {
            this.props.route.params.searchHandler(this.state.keywordInputText)
        }

        this.props.navigation.goBack()
        
    }

    getHistoryList() {
        Storage.getStoreData('orderSearchHistory').then((res)=>{
            if(res != null && res != 'null' && res != 'undefined' && res != undefined && res != ''){
                this.setState({historyList:JSON.parse(res)})

            }
        })
        
    }

    saveHistoryList(keyword) {

        let historyList = this.state.historyList
        if(historyList.length > 0){
            if(historyList.indexOf(keyword) != -1){

            }else{
                historyList.push(keyword)
            }
        }else{
            historyList.push(keyword)
        }
        
        this.setState({historyList:historyList})

        Storage.storeData('orderSearchHistory',JSON.stringify(historyList))
    }

};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        flexDirection: 'column',

    },

    topContain: {
        width: '100%',
        height: 50,
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        alignItems: 'center',

    },

    iconImg: {
        width: 18,
        height: 16
    },
    iconContain: {
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        width: 48
    },
    searchContain:{
        flexDirection:'row',
        alignItems:'center',
        flex:1,
        height: 36,
        backgroundColor: '#f6f6f6',
        borderRadius: 4,
        paddingHorizontal:15,
        marginRight:15
    },
    searchInput:{
        flex: 1,
        padding:0,
        marginLeft:10,
        fontSize:14,
        color:'#333333',
        height: '100%'
    },
    clearContain:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        paddingHorizontal:15,
        height:50
    },
    historyText:{
        fontSize:16,
        color:'#222222'
    },
    clearText:{
        fontSize:14,
        color:'#999999'
    },
    clearImg:{
        width:20,
        height:16,
        marginRight:5,
        resizeMode:'contain'
    },

    historyContain: {
        
        flexDirection: 'row',
        flexWrap: 'wrap',
        
        paddingHorizontal: 15
    },

    historyItem:{
        backgroundColor:'#f6f6f6',
        borderRadius:4,
        paddingHorizontal:15,
        paddingVertical:5,
        marginRight:10,
        marginBottom:10
    }

});